<template>
  <div>
    <img src="../../assets/8.png" alt="" />
    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div class="submit" style="margin: 16px">
        <van-button class="submitBtn" block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <van-button class="code" size="small" @click="showQRcode">{{
      buttonText
    }}</van-button>
    <div class="ORcode" v-if="showBar">
      <div class="custom-slider">
        <!-- 滑动条 -->
        <!-- <div class="track"></div> -->

        <!-- 滑块 -->
        <van-slider
          v-model="sliderValue"
          :max="maxValue"
          @change="handleSliderChange"
          bar-height-active-color="#ff0"
        />

        <!-- 提示信息 -->
        <van-toast v-model:show="showToast" position="middle">
          获取成功
        </van-toast>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";

export default {
  setup() {
    const username = ref("");
    const password = ref("");
    const onSubmit = (values: any) => {
      console.log("submit", values);
    };

    const showBar = ref(false);
    function showQRcode() {
      showBar.value = true;
    }

    // 滑块相关数据
    const sliderValue = ref(0); // 滑块值，初始值为0
    const maxValue = 100; // 滑块最大值，根据实际情况调整

    // 提示信息相关数据
    const showToast = ref(false); // 提示信息是否显示，默认不显示

    // 滑块值改变时的处理函数
    const handleSliderChange = () => {
      if (sliderValue.value === maxValue) {
        // 当滑块滑动到最右侧时
        showToast.value = true; // 显示提示信息
        showBar.value = false; // 隐藏bar
        // 执行倒计时
        startCountdown();
      }
    };

    const buttonText = ref("获取验证码");
    // const isGrey = ref(false);

    const startCountdown = () => {
      let count = 60; // 倒计时时间，单位：秒

      // 修改按钮文字
      buttonText.value = `${count} 秒后重新获取`;
      // isGrey.value = true; // 按钮变为灰色

      // 开始倒计时
      const timer = setInterval(() => {
        count--;
        buttonText.value = `${count} 秒后重新获取`;

        if (count <= 0) {
          clearInterval(timer);
          buttonText.value = "获取验证码";
          // isGrey.value = false; // 恢复按钮颜色
        }
      }, 1000);
    };

    return {
      username,
      password,
      onSubmit,
      showQRcode,
      sliderValue,
      maxValue,
      showToast,
      handleSliderChange,
      showBar,
      buttonText,
      startCountdown,
    };
  },
};
</script>

<style scoped>
img {
  width: 60px;
  height: 60px;
  margin-top: 79px;
  margin-left: 41.666667vw;
}
.van-form {
  margin-top: 60px;
}
.submit {
  margin-top: 50px !important;
}
.submitBtn {
  width: 325px;
  margin: auto;
  background-color: #ff5f16;
}
.van-button--primary {
  border: none !important;
}
.code {
  position: absolute;
  top: 56.666667vw;
  right: 30px;
}
.ORcode {
  /* border: 2px solid red; */
}

/* 自定义滑块样式 */
.custom-slider {
  position: relative;
  height: 50px; /* 滑块高度 */
}

.track {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px; /* 滑块轨道高度 */
  background-color: #e0e0e0; /* 滑块轨道颜色 */
  transform: translateY(-50%);
}
.van-slider {
  height: 20px;
}
.van-slider__bar {
  height: 20px;
}
.grey-button {
  color: grey;
}
</style>
